<template>
  <BaseDialog
    ref="baseDialog"
    width="1000px"
    title="设备详情"
    @confrim="confrim"
  >
    <div style="margin-bottom: 10px">
      <el-date-picker
        v-model="timer"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd HH:mm:ss"
      >
      </el-date-picker>
      <el-button type="primary" @click="handleSearch">查询轨迹</el-button>
      IMEI:{{ Imei }}
    </div>
    <div id="map" ref="map"></div>
  </BaseDialog>
</template>

<script>
import { getDeviceInfo, trajectory } from "@/api/device";
import { Message } from "element-ui";

export default {
  data() {
    return {
      map: null,
      timer: [],
      Imei: "",
    };
  },
  mounted() {},
  methods: {
    open(data, line) {
      this.Imei = data.imei;
      const script = document.createElement("script");
      script.src = `https://mapapi.cloud.huawei.com/mapjs/v1/api/js?callback=initMap&key=${encodeURIComponent(
        "DgEDAK9IRPUY9N+PMYjkFmELYMVAS792Ezw+vOe/hCTj6/4MmyEHYAn7y80NuOSLl3u1nk9LxBLClziTIgN0FT0C/6ZS7jig/e+n8Q=="
      )}`;
      script.async = true;
      script.defer = true;
      document.head.appendChild(script);
      this.$refs.baseDialog.open();

      var mapOptions = {};
      mapOptions.center = {
        lat: line && line.length ? line[0].lat : 28.23529,
        lng: line && line.length ? line[0].lng : 112.93134,
      };
      mapOptions.zoom = 16;
      mapOptions.minZoom = 2;
      mapOptions.maxZoom = 20;
      mapOptions.language = "CHI";
      mapOptions.mapType = "TERRAIN";
      mapOptions.locationControl = true;
      mapOptions.navigationControl = true;
      mapOptions.presetStyleId = "simple"; //standard、night、simple。
      mapOptions.sourceType = "vector";
      setTimeout(() => {
        this.map = new HWMapJsSDK.HWMap(this.$refs.map, mapOptions);
        if (!line.length) {
          Message.warning("暂无轨迹");
          return;
        }
        this.handleLine(line);
      }, 500);
    },
    handleLine(line) {
      console.log(line, "xxxxxxxxxxx");
      this.map.setCenter({
        lat: line[0].lat,
        lng: line[0].lng,
      });

      const start = new HWMapJsSDK.HWMarker({
        position: line[0],
        zIndex: 10,
      });
      start.setMap(this.map);
      const end = new HWMapJsSDK.HWMarker({
        position: line[line.length - 1],
        zIndex: 10,
      });
      end.setMap(this.map);

      const naviLineOption = {
        points: line,
        strokeColor: "red",
        strokeWidth: 20,
        fillColor: "red",
        fillWidth: 5,
        collisionEnable: true,
        animateOption: {
          animate: true,
          timeout: 10000,
        },
      };
      this.map.setZoom(14);
      const naviLine = new HWMapJsSDK.HWNaviLine(naviLineOption);
      naviLine.setMap(this.map);

    },
    async handleSearch() {
      if (this.timer.length) {
        const res = await trajectory({
          startTime: this.timer[0],
          endTime: this.timer[1],
          imei: this.Imei,
        });
        if (!res.status) {
          this.handleLine(res.content);
        }
      } else {
        Message.warning("请选择时间");
      }
    },
    async init(data) {
      const res = await getDeviceInfo({ imei: data.imei });
      if (!res.status) {
        Message.success("获取成功");
        this.info = res.content;
      }
    },
    confrim() {
      this.$emit("confrim", this.dot);
      this.close();
    },
    close() {
      this.$refs.baseDialog.close();
    },
  },
};
</script>

<style lang="scss" scoped>
#map {
  border: 1px solid #c5c4c4;
  height: 600px;
  width: 100%;
}
</style>
